<template>
  <div class="teacher">
    <Header></Header>
    <div class="fa-chalkboard-teacher">
      <img src="../assets/img/back/teacherfengcai.png" style="width: 1200px" alt="">
      <div class="teacher3">
        <div v-for="teacher in teacher_list" :key="teacher.id">
          <div class="tacher1">
            <router-link :to="'/teacher/detail/'+teacher.id" style="color: black">
            <img :src="teacher.image" style="width: 458px;height: 190px" alt="">
            <div style="float: right" class="teacher2">
              <p>{{ teacher.name }}</p>
              <p>{{ teacher.title }}</p>
              <p>{{ teacher.brief }}</p>
            </div>
            </router-link>
          </div>

        </div>

      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "Teacher",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      currentDate: new Date(),
      teacher_list: [],
    }
  },
  created() {
    this.$http.get(`${this.$settings.base_url}course/teacher/`).then(res => {
      this.teacher_list = res.data
      console.log(this.teacher_list)
    })
  }
}
</script>

<style scoped>

.fa-chalkboard-teacher {
  width: 1200px;
  margin: 0 auto;
}

.tacher1 {
  height: 230px;
  margin: 0 auto;
}

.teacher2 {
  width: 695px;
  margin: 0 auto;
}
router-link{
  color: black;
}
.teacher3 {
  margin-top: 30px;
}
</style>